<template>
  <view class="input-verify">
    <view class="input-wrap">
      <!-- 在h5环境下，无法动态设置type，动态设置type，会导致placeHolder样式失效问题 -->
      <input placeholder-class="input-holder" class="input" :class="inputType === 'msgCode' ? 'input-msg-code' : ''"
        :placeholder="placeHolder" type="number" :value="value" @input="inputEvent"
        v-if="!['common', 'password', 'imgCode'].includes(inputType)" :maxlength="30" />

      <input placeholder-class="input-holder" class="input" :class="inputType === 'msgCode' ? 'input-msg-code' : ''"
        :placeholder="placeHolder" type="text" :value="value" @input="inputEvent"
        v-if="['common', 'imgCode'].includes(inputType)" maxlength="30" />

      <input placeholder-class="input-holder" class="input" :class="inputType === 'msgCode' ? 'input-msg-code' : ''"
        :placeholder="placeHolder" type="text" :value="value" @input="inputEvent" data-type="password"
        :password="!isShowPassword" v-if="inputType === 'password'" maxlength="30" />

      <text class="error" v-if="isShowErrorMessage && !isVerifyCode">* {{ errMsg }}</text>

      <view class="img-code" v-if="inputType === 'imgCode'" @click="changeImageVerificationCade">
        <view class="wrap">
          <image :src="imgVerificationCode" mode="" class="img-verification-code"></image>
        </view>
      </view>

      <view class="msg-code-tips" v-if="inputType === 'msgCode'">
        <!-- <text class="error" v-if="isShowErrorMessage">* {{errMsg}}</text> -->

        <view class="msg-code-tips-content" @click="handleLoadMsgCode"
          :class="isLoading ? 'msg-code-tips-content--loading' : ''">{{ countDownTips }}</view>
      </view>

      <view class="password" v-if="inputType === 'password'">
        <image class="logo" :src="isShowPassword ? '/static/settings/open_eye.png' : '/static/settings/close_eye.png'"
          @click="handleChangeShowPwd"></image>
      </view>
    </view>

    <!-- <view class="imgcode-error-wrap"
      v-if="['imgCode', 'password', 'longText'].includes(inputType) && !isForbiddenRuleMsg">
      <text class="error" v-if="isShowErrorMessage && ['imgCode', 'password', 'longText'].includes(inputType)">* {{errMsg}}</text>
    </view> -->

  </view>
</template>

<script>
export default {
  props: {
    isImgCode: {
      type: Boolean,
      required: false,
      default: false
    },
    imgVerificationCode: {
      type: String,
      required: false,
      default: ''
    },
    isVerifyCode: {
      type: Boolean,
      required: false,
      default: false
    },
    inputType: {
      type: String,
      required: true,
      default: true
    },
    placeHolder: {
      type: String,
      required: true,
      default: ''
    },
    errMsg: {
      type: String,
      required: false,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    isCustomVerifyCode: {
      type: Boolean,
      required: false,
      default: false
    },
    isForbiddenRuleMsg: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  watch: {
    value(newVal) {
      if (!this.isCustomVerifyCode) {
        if (!newVal) {
          this.isShowErrorMessage = true
        } else {
          this.isShowErrorMessage = false
        }
      }
    },
  },
  data() {
    return {
      countDownTime: 60,
      countDownTips: this.$t('mine.sendCode'),
      isLoading: false,
      msgCodeInterval: null,
      isShowErrorMessage: false,
      isShowPassword: false
    }
  },
  created() {
    this.inputValue = this.inputData
  },
  destroyed() {
    clearInterval(this.msgCodeInterval)
    this.msgCodeInterval = null
  },
  methods: {



    // 图形验证码切换
    changeImageVerificationCade() {
      this.$emit('changeVerificationCode', true)
    },
    inputEvent(e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    },
    async handleLoadMsgCode() {
      if (this.isImgCode) {
        if (this.isLoading) {
          uni.showToast({
            title: 'Obtaining verification code',
            icon: 'none',
            duration: 1500
          })
          return
        }

        this.$emit('getMsgCode')

      } else {
        this.$emit('isCanSetPhoneMsg')
      }
    },
    handleMsgCodeCountDownTime() {
      this.isLoading = true
      this.countDownTips = `Resend(${this.countDownTime}s)`
      this.msgCodeInterval = setInterval(() => {
        if (this.countDownTime < 1) {
          this.countDownTips = this.$t('mine.resend')
          this.countDownTime = 60
          this.isLoading = false
          clearInterval(this.msgCodeInterval)
          this.msgCodeInterval = null
          return
        }

        this.countDownTime--
        this.countDownTips = `${this.$t('mine.resend')}(${this.countDownTime}s)`
      }, 1000)
    },
    handleChangeShowPwd() {
      this.isShowPassword = !this.isShowPassword
    },
    handleChangeShowErrorMsg(isShow) {
      this.isShowErrorMessage = isShow
    }
  }
}
</script>

<style scoped lang="scss">
.input-verify {
  width: 100%;

  .input-wrap {
    width: 100%;
    height: 96upx;

    border-radius: 24upx;
    background: rgba(255, 255, 255, 0.15);

    display: flex;
    align-items: center;
    justify-content: space-between;

    .input {
      width: 100%;
      height: 100%;
      padding: 0 0 0 32upx;

      color: #fff;

      font-family: "PingFang SC";
      font-size: 28upx;
      font-style: normal;
      font-weight: 500;
      line-height: 96upx;

      border: none;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .input-msg-code {
      width: 300upx;
      box-sizing: border-box;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ::v-deep .input-holder {
      color: #AAA;

      text-align: left;
      font-family: "PingFang SC";
      font-size: 28upx;
      font-style: normal;
      font-weight: 400;
      line-height: 96upx;

      border: none;
    }

    .error {
      color: #FF3419;

      font-family: "PingFang SC";
      font-size: 24upx;
      font-style: normal;
      font-weight: 400;
      line-height: 96upx;

      padding: 0 16upx;
      width: 300upx;
      text-align: right;

      margin-top: 0;
    }

    .img-code {
      width: 420upx;
      height: 100%;

      display: flex;
      align-items: center;
      justify-content: flex-end;

      .error {
        color: #FF3419;

        font-family: "PingFang SC";
        font-size: 24upx;
        font-style: normal;
        font-weight: 400;
        line-height: 96upx;
        width: 144upx;
        padding: 0 16upx;
        text-align: right;
      }

      .wrap {
        width: 260upx;
        height: 80upx;

        border-radius: 8upx;
        background: #E0E0E0;

        margin-right: 8upx;

        .img-verification-code {
          width: 100%;
          height: 100%;
          border-radius: 8upx;
        }
      }
    }

    .password {
      width: 104upx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;

      &:before {
        content: '';
        background-color: rgba(255, 255, 255, 0.10);
        width: 2upx;
        height: 24upx;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
      }

      .logo {
        width: 40upx;
        height: 40upx;
      }
    }
  }

  .imgcode-error-wrap {
    height: 34upx;
    margin-top: 8upx;
    font-size: 0;

    .error {
      color: #FF3419;

      font-family: "PingFang SC";
      font-size: 24upx;
      font-style: normal;
      font-weight: 400;
      line-height: 34upx;
      width: 144upx;
      text-align: right;
    }
  }

  .msg-code-tips {
    // width: 374upx;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 0;

    .error {
      width: 142upx;
      color: #ED3921;

      font-family: "PingFang SC";
      font-size: 24upx;
      font-style: normal;
      font-weight: 400;
      line-height: 34upx;
      text-align: right;

      margin-right: 16upx;

      padding: 0;
      margin-top: 0;
    }

    .msg-code-tips-content {
      width: 216upx;
      height: 100%;
      text-align: center;

      color: #FF8C00;

      text-align: center;
      font-family: "PingFang SC";
      font-size: 24upx;
      font-style: normal;
      font-weight: 400;
      line-height: 96upx;

      position: relative;

      &--loading {
        color: #AAA;
      }

      &:before {
        content: '';
        width: 2upx;
        height: 24upx;

        background-color: rgba(0, 0, 0, 0.10);

        position: absolute;

        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>